<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>jQuery UI Example Page</title>
                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
                
                <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" type="text/css" />
                <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" type="text/css" />
                
                <script>
                    $(document).ready(function(){
        
         $("#autocomp").autocomplete({  source: "functions/listaSiglas.php" })});
         
                 
                 
      
                </script>
               
                 <script>
                        $(document).ready(function()
                        {
                           $("#autocomp").autocomplete({ close:function(event,ui) 
                        {
                     var input = $("#autocomp").val();
                     $.get("functions/nomRamoPorSigla.php",{ 'siglaCurso': input},
                     function(data){
                         
                         if (data != ""){
                             
                             $("p1").text(data);
                             
                                        }
                                        else{ $("p1").text("");}
                                    })
                        }
                    });
                    
                     
                 
             });
                        
                </script>
                <script>
	$(function() {
		$( "#slider-vertical" ).slider({
			orientation: "vertical",
			range: "min",
			min: 0,
			max: 10,
			value: 5,
			slide: function( event, ui ) {
				$( "#amount" ).val( ui.value +" kms");
			}
		});
		$( "#amount" ).val( $( "#slider-vertical" ).slider( "value" )+" kms" );
	});
	</script>
                

		
	
			
	</head>
        <body>
            
	<h1>Autocompletar</h1>
        
        <div class="demo">

            <form>
            Escribe la sigla de un ramo <input type="text" size="20" id="autocomp">
            <p1></p1>
            </form>
           
</div><!-- End demo -->

	<style>
	#demo-frame > div.demo { padding: 10px !important; };
	</style>
	



<div class="demo">

<p>
	<label for="amount">Radio:</label>
	<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

<div id="slider-vertical" style="height:200px;"></div>

</div><!-- End demo -->		

	</body>
</html>
